<template>
  <div id="state_ratio_charts" style="width: 100%;height: 100%;">
    <div class="nodata" v-if="!data || !data.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) return
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("state_ratio_charts"))
      
      const labelName = []
      const data1 = []
      const data2 = []
      this.data.forEach(item => {
        labelName.push(item.hours+':00')
        data1.push(item.total)
        data2.push(item.count)
      })
      
      const option = {
          title: {
              text: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              icon: 'circle',
              itemHeight: this.$options.filters.fontSize(0.06),
              itemWidth: this.$options.filters.fontSize(0.06),
              data: ['总量', '临停'],
              textStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.14)
              },
              right: '10%'
          },
          grid: {
              top: '20%',
              left: '3%',
              right: '4%',
              bottom: '5%',
              containLabel: true
          },
          toolbox: {
              show: false,
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
          type: 'category',
          boundaryGap: true,//坐标轴两边留白
          data: labelName,
          axisLabel: { //坐标轴刻度标签的相关设置。
          // interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
            textStyle: {
              color: '#fff',
              fontSize: this.$options.filters.fontSize(0.14),
            },
            formatter:function(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 5;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName
            },
            //rotate:50,
          },
          axisTick:{//坐标轴刻度相关设置。
            show: false,
          },
          axisLine:{//坐标轴轴线相关设置
            lineStyle:{
              color:'#383838',
              // opacity:0.2
            }
          },
          splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#E5E9ED',
            // 	opacity:0.1
            }
          }
          },
          yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.14),
              }
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#383838',
              // 	opacity:0.1
              }
            }

          }
        ],
          series: [
              {
                  name: '总量',
                  nameTextStyle: {
                    fontSize: this.$options.filters.fontSize(0.14)
                  },
                  type: 'line',
                  symbol: 'circle',
                  symbolSize: this.$options.filters.fontSize(0.06),
                  itemStyle: {
                  normal: {
                      color:"#9A5B24",
                      lineStyle: {
                  color: "",
                  width:1
                      },
                      areaStyle: { 
                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: 'rgba(154, 91, 36, 0)'
                        }, {
                          offset: 1,
                          color: 'rgba(154, 91, 36, 0.5)'
                        }]),
                      }
                  }
            },
                  data: data1
              },
              {
                  name: '临停',
                  type: 'line',
                  nameTextStyle: {
                    fontSize: this.$options.filters.fontSize(0.12)
                  },
                  symbol: 'circle',
                  symbolSize: this.$options.filters.fontSize(0.06),
                  itemStyle: {
                  normal: {
                  color:'#5482C0',
                      lineStyle: {
                        color: "#5482C0",
                        width:1
                      },
                      areaStyle: { 
                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: 'rgba(84, 130, 192, 0)'
                        }, {
                          offset: 1,
                          color: 'rgba(84, 130, 192, 0.5)'
                        }]),
                      }
                  }
            },
                  data: data2
              }
          ]
      }


      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
#state_ratio_charts {
  position: relative;
}
</style>